<template>
  <div class="userTitle">
    <div class="titleWrap">
      <div class="left">
        <span @click="goWhere(item.route)" v-for="(item, index) in indexNavArr" :key="index" class="cursor" :class="{ 'active': $route.path.indexOf(item.route) > 0 }">
          {{ item.name }}
        </span>
      </div>
      <LogisticList v-if="logisticShow" @close="closeLogistic"></LogisticList>
      <div class="right" v-if="!isLogin">
        <em class="cursor textB" @click="goWhere('login')">登录</em>
        <span>|</span>
        <em class="cursor textB" @click="goWhere('reg')">免费注册</em>
      </div>
      <div class="right loged" v-if="isLogin">
        <b @click="goWhere('noticeList')" class="cursor el-icon-bell" :class="{'notice': false}"></b>
        <span>账户余额：
          <span>{{ sellerInfo.balance }}元</span>
        </span>
        <em class="button-tip rechargeBtn" @click="goWhere('accountMoney')">充值</em>
        <strong @mouseover="isShowInfo=true" @mouseout="isShowInfo=false" class="cursor userInfo">Hi~{{ userInfo.userName }}
          <i class="cursor el-icon-arrow-down"></i>
        </strong>
        <el-collapse-transition>
          <ul class="infoBox" @mouseover="isShowInfo=true" @mouseout="isShowInfo=false" v-show="isShowInfo">
            <li class="head">
              <img src="../../../assets/images/head.jpg" alt="用户头像">
            </li>
            <li class="userInfo">
              Hi~{{ userInfo.userName }}
            </li>
            <li class="level">
              <i class="el-icon-star-on"></i>
              <span>{{ userInfo.levelDetail }}</span>
              <span>首重{{ logisticList.firstPrice }}元起</span>
            </li>
            <li class="balance">
              <span>账户余额</span>
              <strong>￥{{ sellerInfo.balance }}</strong>
            </li>
            <li class="recharge">
              <span class="cursor" @click="logisticShow=true">物流成本</span>
              <span class="cursor" @click="goWhere('accountMoney', 2)">资金明细</span>
            </li>
            <li class="changeQQ">
              <span class="cursor" @click="toFixQQ">修改QQ/微信</span>
            </li>
            <li class="exit cursor" @click="logOut">
              退出
            </li>
          </ul>
        </el-collapse-transition>
      </div>
    </div>
    <div class="alert">
      <el-dialog title="修改QQ/微信" :visible.sync="fixContObj.show" :modal-append-to-body="false" width="600px">
        <div class="list">
          <span>QQ</span>
          <el-input v-model="fixContObj.qq" type="text" style="width:300px;" placeholder="请输入内容"></el-input>
        </div>
        <div class="list">
          <span>微信</span>
          <el-input v-model="fixContObj.weChatNum" type="text" style="width:300px;" placeholder="请输入内容"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <b class="button-w" @click="fixContObj.show = false">取消</b>
          <b class="button-n" @click="sureFix">确定</b>
          <!-- <el-button @click="showPass = false">取 消</el-button>
          <el-button type="primary" @click="fixPass">确 定</el-button> -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
// import { indexNavArr } from '../../../assets/js/common'
import { mapGetters, mapActions } from 'vuex'
import LogisticList from '../alert/logisticList'
export default {
  name: 'userTitle',
  components: {
    LogisticList
  },
  data () {
    return {
      isShowInfo: false,
      logisticShow: false,
      fixContObj: {
        show: false,
        qq: '',
        weChatNum: ''
      }
    }
  },
  computed: {
    indexNavArr () {
      return ([{
        name: this.logoInfo.substationName + '首页',
        route: 'overview'
      },
      {
        name: '我的后台',
        route: 'backStage'
      }
      ])
    },
    isLogin: {
      get: function () {
        if (this.userInfo.userName) {
          return true
        } else {
          return false
        }
      },
      set: function (val) {
        return val
      }
    },
    ...mapGetters([
      'userInfo',
      'sellerInfo',
      'logisticList',
      'logoInfo'
    ])
  },
  watch: {
    $route () {
      this.watchRouter()
    }
  },
  methods: {
    closeLogistic () {
      this.logisticShow = false
    },
    showInfo () { // 显示用户信息控制
      this.isShowInfo = !this.isShowInfo
    },
    goWhere (route, type) { // 跳转
      if (type) {
        this.$router.push({ name: route, query: { type: type } })
      } else {
        if (route === 'backStage' && !this.isLogin) {
          this.$router.push({ name: 'login' })
        } else {
          this.$router.push({ name: route })
        }
      }
    },
    logOut () { // 登出
      this.setUserInfo('')
      this.goWhere('login')
    },
    getSellerInfo () { // 获取商家详情 金额什么的
      this.$ajax.post('/api/seller/account/getSellerInfoBySellerAccountId', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          this.setSellerInfo(data.data.data)
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        if (err) {
          this.$message({
            message: '生意太火爆了, 请稍后再试',
            type: 'error'
          })
        }
      })
    },
    getLogisticPrice () { // 获取物流价格列表
      this.$ajax.post('/api/seller/account/getSellerLogisticsPriceList', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          let res = data.data.data
          this.setLogisticList(res[0])
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    watchRouter () {
      if (this.userInfo && this.userInfo.sellerAccountId) {
        this.getSellerInfo()
        // if (!this.logisticList.firstPrice) {
        //   this.getLogisticPrice()
        // }
      }
    },
    toFixQQ () {
      this.fixContObj = {
        ...this.fixContObj,
        show: true,
        qq: this.sellerInfo.qq || '',
        weChatNum: this.sellerInfo.wechatNum || ''
      }
    },
    sureFix () {
      if (this.fixContObj.qq === '') {
        this.$message({
          message: '请输入QQ',
          type: 'warning'
        })
      } else if (this.fixContObj.weChatNum === '') {
        this.$message({
          message: '请输入微信',
          type: 'warning'
        })
      } else {
        this.$ajax.post('/api/seller/account/updateSellerQQWechat', {
          wechatNum: this.fixContObj.weChatNum,
          sellerAccountId: this.userInfo.sellerAccountId,
          qq: this.fixContObj.qq
        }).then((res) => {
          if (res.data.code === '200') {
            this.fixContObj.show = false
            this.getSellerInfo()
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        })
      }
    },
    ...mapActions([
      'setUserInfo',
      'setSellerInfo',
      'setLogisticList'
    ])
  },
  created () {
    this.watchRouter()
    if (this.userInfo && this.userInfo.sellerAccountId) {
      this.getLogisticPrice()
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.userTitle
  height 48px
  line-height 48px
  background $titleBgColor
  display flex
  padding 0 100px
  box-shadow 0 1px 2px #dedede
  justify-content center
  font-size $fontSize
  .cursor
    cursor pointer
  .titleWrap
    display flex
    width 100%
    justify-content space-between
    max-width 1240px
    .left
      text-align left
      span
        color $fontColor-gray
        margin-right 30px
        &:hover
          color $mainColor
      .active
        color #ffffff
    .right
      text-align right
      position relative
      .rechargeBtn
        color #ffffff
        background $buttonBg
      .textB
        color #999999
      span, b, i
        color $fontColor-gray
      span
        margin 0 8px
      strong
        margin-left 24px
        color #ffffff
    .loged
      b
        color #999999
      >span
        margin 0 22px
        font-size $fontSize
        color #999999
        >span
          margin 0
          color #DDDDDD
      .notice
        position relative
        &:after
          content ''
          position absolute
          top -2px
          right -2px
          width 5px
          height 5px
          border-radius 50%
          background $mainColor
      .infoBox
        position absolute
        z-index 99
        top 45px
        right 0
        padding 0 20px
        background #ffffff
        boxShowRect()
        li
          line-height 38px
        .head
          text-align center
          line-height 1
          margin-top 30px
          img
            width 40px
            height 40px
            border-radius 50%
        .userInfo
          text-align center
          font-size $fontSize
          color $fontColor-gray
        .level
          height 20px
          line-height 20px
          margin 9px 0
          background RGBA(255, 4, 55, 0.08)
          border-radius 10px
          display flex
          justify-content space-between
          i
            color rgba(255, 174, 3, 1)
            font-size $fontSize-m
          span
            fontSize($fontSize-s, 20px, $mainColor)
        .balance
          display flex
          justify-content space-between
          span
            fontSize($fontSize, 38px, $fontColor-gray)
          strong
            fontSize($fontSize-m, 38px, $fontColor)
        .recharge
          display flex
          justify-content space-between
          // margin-bottom 12px
          span
            fontSize($fontSize, 38px, $mainColor)
          em
            align-self center
        .changeQQ
          display flex
          justify-content space-between
          span
            fontSize($fontSize, 38px, $mainColor)
        .exit
          text-align center
          border-top 1px solid #D8D8D8
          fontSize($fontSize, 38px, $fontColor-gray)
  .alert
    .list
      padding 0 20px
      font-size 14px
      color #525F75
      margin-top 20px
      span
        display inline-block
        min-width 100px
        text-align right
        margin-right 20px
</style>
